import { ImageResponse } from 'next/og';
import { t } from '@/i18n';
import { safe } from '@/lib/api';
import { apiCompare } from '@/lib/api-compare';
import { displayValue } from '@/lib/format';
import { OG_INK2, OG_INK3, OG_RULE, OG_SIZE_H, OG_SIZE_W, OgFrame, OgWordmark } from '../../og-shared';

export const alt = 'Country ranking on CountryAtlas';
export const size = { width: OG_SIZE_W, height: OG_SIZE_H };
export const contentType = 'image/png';
export const revalidate = 3600;

/** Social image for /rankings/[indicator]: title + the top 3 (flag, name, value). */
export default async function RankingOgImage({ params }: { params: Promise<{ indicator: string }> }) {
  const { indicator } = await params;
  const data = await safe(apiCompare.ranking(indicator, { limit: 3, sparkline: false }));
  const name = data?.indicator.short_name ?? data?.indicator.name ?? indicator.replace(/-/g, ' ');
  const year = data?.year_used ?? '';
  return new ImageResponse(
    (
      <OgFrame>
        <OgWordmark size={28} />
        <div style={{ display: 'flex', flexDirection: 'column', marginTop: 48 }}>
          <div style={{ fontSize: 22, color: OG_INK3, textTransform: 'uppercase', letterSpacing: 2, display: 'flex' }}>{t('rankings.title')}</div>
          <div style={{ fontSize: name.length > 28 ? 52 : 64, fontWeight: 600, letterSpacing: -1.5, lineHeight: 1.05, marginTop: 8, display: 'flex' }}>{t('ranking.heading', { name })}</div>
          {year ? <div style={{ marginTop: 10, fontSize: 26, color: OG_INK2, display: 'flex' }}>{`${String(year)}${data ? ` · ${data.n} countries` : ''}`}</div> : null}
        </div>
        <div style={{ display: 'flex', gap: 40, marginTop: 'auto', paddingTop: 22, borderTop: `1px solid ${OG_RULE}` }}>
          {(data?.rows ?? []).slice(0, 3).map((r) => (
            <div key={r.country.id} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ fontSize: 26, color: OG_INK3, display: 'flex' }}>{String(r.rank)}</div>
              <div style={{ fontSize: 44, lineHeight: 1, display: 'flex' }}>{r.country.flag ?? ''}</div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontSize: 20, color: OG_INK2, display: 'flex' }}>{r.country.name ?? r.country.id}</div>
                <div style={{ fontSize: 30, fontWeight: 600, display: 'flex' }}>{displayValue(r.value, data!.indicator, r.formatted)}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ position: 'absolute', right: 64, bottom: 24, fontSize: 20, color: OG_INK3 }}>{t('og.site')}</div>
      </OgFrame>
    ),
    { ...size },
  );
}